<script setup>
import { shallowRef, watch, ref, onMounted } from "vue";
import { useMyStore } from "../store/index";
import image from "@/components/previewComponnt/image.vue";
import video from "@/components/previewComponnt/video.vue";
import sound from "@/components/previewComponnt/audio.vue";
import text from "@/components/previewComponnt/text.vue";
import Qbotton from "@/components/previewComponnt/botton.vue";
const componentOption = shallowRef({
  image,
  video,
  sound,
  text,
  btn: Qbotton,
});
const swipe = ref(null);
const data = useMyStore().customArtwork.pageContent;
const store = useMyStore();
onMounted(() => {
  console.log("父级元素出发");
  store.setSwiper(swipe.value);
});
</script>
<template>
  <van-swipe
    indicator-color="transparent"
    style="height: 100vh"
    vertical
    ref="swipe"
  >
    <van-swipe-item v-for="(item, index) in data" :key="index">
      <component
        v-for="(son1, index1) in item"
        :is="componentOption[son1.name]"
        :content="son1"
        :key="index1"
      />
    </van-swipe-item>
  </van-swipe>

  <!-- <component
   
    :key="index"
    :is="componentOption[item.name]"
    :content="item"
  /> -->
</template>

<style lang="less" scoped></style>
